CSS for Mobile Browsers : Common Patterns (part 4)

5. Backgrounds

Changing the background color was the first new feature in XHTML MP that every WML developer used. It was heaven after the old black and white WML. Every mobile browser understands the background property and its specific definitions, like background-image and background-repeat. However, we need to remember that on mobile devices, the context of the user can be very different from a desktop. It is not recommended to use a complex background, and it’s best to use strongly contrasting foreground and background colors.

In compatible browsers, it will be very helpful to use data URI patterns for backgrounds to reduce network requests. One feature that can be buggy on mobile devices is the use of background-attachment: fixed. This allows the background image to be fixed even after scrolling.

Specifying multiple background images (separated by commas) is not good practice for mobile browsers. Symbian S60 browsers appear to be among the few that support it. Some WebKit-based browsers, like mobile Safari, also accept some CSS3 attributes as extensions, like -webkit-background-origin and -webkit-background-size. The upcoming Table 4 lists background compatibility.

6. Overflow

A common design pattern in desktop websites is to use a div (or other element) with a fixed size, and content larger than that size. Using the overflow property, we can define a value of scroll, auto, visible (the default), or hidden to indicate what to do with the content that is outside the bounds of the element. If we use a value of scroll, the div will have its own scrollbar on supporting devices.

The use of overflow is discouraged, like the iframe technique. Even with compatible devices, there are usability problems; for one thing, it’s not easy for the user to tell if she’s moving the main scrollbar or the inner scrollbar. And if it works, there are a lot of bugs in mobile browsers, from touch devices with the scroll not working to devices that hide the overflow content without providing scrollbars. Even less compatible are the CSS3 overflow-x and overflow-y properties. Table 7-12 lists overflow compatibility.

7. Content

The content attribute allows us to use the after and before pseudoclasses to define an image, some text, or an attribute value to be inserted after or before the selector. The problem is that these pseudoclasses are not defined in the WAP CSS subset, so they will work in some devices but not in others.

Some browsers allow us to apply the content property to any selector, but this is not usually recommended because it will lead us to insert text and content in the CSS instead of the (x)HTML document.

The following sample will add two stars after the link’s text and a bullet image before:

a:after {
    content: " ** "
}
a:before {
    content: url('bullet.gif');
}

Table 4 lists compatibility for the use of content.

8. Opacity

Alpha transparency of elements inside a mobile web page will not work in many low- and mid-end devices, so we should use it with care and knowing that it may not have a visible effect. The opacity CSS 2.1 property was not defined in the WAP CSS subset, but we can still use it and compatible browsers will render it. Compatibility with this and the other properties just discussed is illustrated in Table 4.

9. List design

Now is the time to use CSS to define our own design for each list. For doing this we have the typical list properties in CSS—list-style-type, list-style-image, and list-style-position—and the compressed list-style.

The compatibility for these styles in the mobile web is great, excepting some little differences in the bullets; for example, some devices show a square for a bullet, even if it’s defined as a circle.

The use of images as bullets can enhance our designs. On compatible devices remember that we can use small data URI images, eliminating the need for new requests for the image.

10. Visibility

The visibility property allows us to hide and show an element dynamically. This property is covered by all mobile standards and we are free to use it with the values visible and hidden. The collapse value can be more problematic.

11. Cursor management

CSS allows any web designer to define which mouse cursor should be used in any situation (generally, the body or a :hover selector). In the mobile world this is useful only for devices supporting cursor-based navigation, though, because they are the only browsers that show some kind of cursor over the screen.

The most useful cursors for mobile sites are default, pointer, and progress. The other cursors available (resize and move) can be very difficult to use in any mobile situation. We should use the pointer cursor for defining non-link clickable zones (using a :hover selector), which may be handled by a JavaScript event function.

The progress cursor is often applied to the body dynamically with JavaScript to indicate to the user that a current operation is working. In browsers supporting focus and touch navigation, we should generate this pattern using a modal pop-up window with a floating loading image.

Table 5 lists compatibility with the progress and pointer cursors for the various browsers.